import { useState, useRef, useEffect } from 'react'

/**
 * Tooltip 提示工具组件
 * @param {string} content - 提示内容
 * @param {string} position - 位置 (top, bottom, left, right)
 * @param {React.ReactNode} children - 子元素
 * @param {number} delay - 显示延迟（毫秒）
 */
export default function Tooltip({ 
  content, 
  position = 'top', 
  children,
  delay = 200,
  className = ''
}) {
  const [isVisible, setIsVisible] = useState(false)
  const [coords, setCoords] = useState({ x: 0, y: 0 })
  const timeoutRef = useRef(null)
  const targetRef = useRef(null)

  const showTooltip = () => {
    timeoutRef.current = setTimeout(() => {
      if (targetRef.current) {
        const rect = targetRef.current.getBoundingClientRect()
        let x = 0
        let y = 0

        switch (position) {
          case 'top':
            x = rect.left + rect.width / 2
            y = rect.top - 10
            break
          case 'bottom':
            x = rect.left + rect.width / 2
            y = rect.bottom + 10
            break
          case 'left':
            x = rect.left - 10
            y = rect.top + rect.height / 2
            break
          case 'right':
            x = rect.right + 10
            y = rect.top + rect.height / 2
            break
          default:
            x = rect.left + rect.width / 2
            y = rect.top - 10
        }

        setCoords({ x, y })
        setIsVisible(true)
      }
    }, delay)
  }

  const hideTooltip = () => {
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current)
    }
    setIsVisible(false)
  }

  useEffect(() => {
    return () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current)
      }
    }
  }, [])

  const getPositionClasses = () => {
    switch (position) {
      case 'top':
        return '-translate-x-1/2 -translate-y-full'
      case 'bottom':
        return '-translate-x-1/2'
      case 'left':
        return '-translate-x-full -translate-y-1/2'
      case 'right':
        return '-translate-y-1/2'
      default:
        return '-translate-x-1/2 -translate-y-full'
    }
  }

  const getArrowClasses = () => {
    switch (position) {
      case 'top':
        return 'bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 rotate-45'
      case 'bottom':
        return 'top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-45'
      case 'left':
        return 'right-0 top-1/2 translate-x-1/2 -translate-y-1/2 rotate-45'
      case 'right':
        return 'left-0 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-45'
      default:
        return 'bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 rotate-45'
    }
  }

  return (
    <>
      <div
        ref={targetRef}
        onMouseEnter={showTooltip}
        onMouseLeave={hideTooltip}
        className={`inline-block ${className}`}
      >
        {children}
      </div>

      {isVisible && content && (
        <div
          className="fixed z-[9999] pointer-events-none"
          style={{ left: `${coords.x}px`, top: `${coords.y}px` }}
        >
          <div
            className={`
              glass-effect-dark border border-white/20 rounded-lg px-3 py-2 text-sm text-white
              shadow-xl backdrop-blur-md max-w-xs
              animate-scale-in
              ${getPositionClasses()}
            `}
          >
            {/* 箭头 */}
            <div className={`absolute w-2 h-2 glass-effect-dark border-white/20 ${getArrowClasses()}`}></div>
            
            {/* 内容 */}
            <div className="relative z-10 whitespace-nowrap">
              {content}
            </div>
          </div>
        </div>
      )}
    </>
  )
}

/**
 * 快捷提示组件 - 用于显示操作提示
 */
export function QuickTip({ icon = '💡', title, description, action, onAction }) {
  const [dismissed, setDismissed] = useState(false)

  if (dismissed) return null

  return (
    <div className="glass-effect-dark border border-accent-blue/30 rounded-xl p-4 animate-slide-down">
      <div className="flex items-start space-x-3">
        <div className="text-2xl flex-shrink-0">{icon}</div>
        <div className="flex-1">
          <h4 className="text-sm font-semibold text-white mb-1">{title}</h4>
          <p className="text-xs text-gray-400">{description}</p>
          {action && onAction && (
            <button
              onClick={onAction}
              className="mt-2 text-xs text-accent-blue hover:text-accent-cyan font-semibold transition-colors"
            >
              {action} →
            </button>
          )}
        </div>
        <button
          onClick={() => setDismissed(true)}
          className="text-gray-500 hover:text-gray-300 transition-colors flex-shrink-0"
        >
          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>
  )
}

